import {PageContainer, ProCard} from "@ant-design/pro-components";
import {DndProvider, useDrop} from "react-dnd";
import {HTML5Backend} from "react-dnd-html5-backend";
import DragImage from "@/pages/ActivityCreate/components/DragImage";
import {useSnapshot} from "@@/exports";
import {CreatePageModel, PageItemType} from "@/models/createPage";
import Preview, {getItemDom} from "./components/Preview";
import DragAward from "@/pages/ActivityCreate/components/DragAward";


const Container = () => {
    let pageState = useSnapshot(CreatePageModel.state);
    const [{isOver, canDrop}, drop] = useDrop(() => ({
        accept: "bh",
        drop: (item, monitor) => {
            CreatePageModel.actions.addItem({
                ...item as PageItemType,
                id: Date.now().toString()
            })
        }
    }))

    return (<PageContainer>

        <ProCard split="vertical">
            <ProCard
                colSpan="30%"
            >
                <div style={{
                    display: 'grid',
                    gap: '20px 30px',
                    gridTemplateColumns: "1fr 1fr"
                }}>
                    <DragImage type="drag"/>
                    <DragAward type="drag"/>
                    <DragAward type="drag"/>
                </div>
            </ProCard>
            <ProCard title="预览">
                <div style={{height: 600}} ref={drop} title="">
                    <Preview/>
                </div>
            </ProCard>
            <ProCard>
                {pageState.currentItem && getItemDom("config", pageState.currentItem)}
            </ProCard>
        </ProCard>
    </PageContainer>)
}
const ActivityCreate = () => {

    return <>
        <DndProvider backend={HTML5Backend}>
            <Container/>
        </DndProvider>

    </>
}


export default ActivityCreate